<template>
	<view class="">
		<!-- 顶部导航 -->
		<fa-navbar :title="title"></fa-navbar>
		<!-- 用户信息 -->
		<u-sticky :enable="false"><fa-user-header :user="user" :showMore="showMore"></fa-user-header></u-sticky>
		<!-- 我的粉丝 -->
		<view class="u-m-t-5">
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in followerList" :key="item.id" @click="click" @open="open" :options="item.options">
				<view class="item u-border-bottom" @click="goPage(item.user_id)">
					<image mode="aspectFill" :src="item.user && item.user.avatar" />
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap">
						<view class="text-bold">{{ item.user && item.user.nickname }}</view>
						<text class="signature u-p-t-10 u-line-2">{{ (item.user && item.user.bio) || vuex_bio }}</text>
					</view>
				</view>
			</u-swipe-action>
		</view>
		<!-- 空数据 -->
		<wanl-empty style="padding:0;" v-if="!followerList.length"></wanl-empty>
		<!-- 加载更多 -->
		<view class="u-p-t-30 u-p-b-30" v-if="followerList.length"><u-loadmore bg-color="#f4f6f8" :status="has_more ? status : 'nomore'" /></view>
		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" :icon-style="{ color: theme.bgColor }" :custom-style="{ backgroundColor: theme.lightColor }"></u-back-top>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
import { attention } from '@/common/fa.mixin.js';
export default {
	mixins: [attention],
	onLoad(e) {
		let query = this.$Route.query || e || {};
		let user_id = query.user_id || 0;
		if (user_id) {
			this.title = 'TA的粉丝';
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.showMore = true;		
			this.user = this.vuex_othen_user;
		} else {
			this.user = this.vuex_user;
		}
		this.getUserFollower();
	},
	data() {
		return {
			title: '我的粉丝',
			showMore: false,
			scrollTop: 0,
			user: {},
			followerList: [],
			page: 1,
			has_more: false,
			disabled: false,
			btnWidth: 180,
			show: false,
			status: 'loadmore'
		};
	},
	methods: {
		click(index, index1) {
			if (index1 == 1) {
				//提问
				this.$wanlshop.to(`/pages/community/question/post?user_id=${this.followerList[index].user.id}`)
			} else {
				if (this.followerList[index].user.followed) {
					this.goAttentionDelete(this.followerList[index].user, 'user', () => {
						this.$set(this.followerList[index].options[0], 'text', '添加关注');
					});
				} else {
					this.goAttentionCreate(this.followerList[index].user, 'user', () => {
						this.$set(this.followerList[index].options[0], 'text', '取消关注');
					});
				}
			}
		},
		// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
		open(index) {
			// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
			// 原本为'false'，再次设置为'false'会无效
			this.followerList[index].show = true;
			this.followerList.map((val, idx) => {
				if (index != idx) this.followerList[idx].show = false;
			});
		},
		getUserFollower: async function() {
			let res = await this.$api.getUserFollower({
				id: this.user.id,
				page: this.page
			});
			this.status = 'loadmore';
			if (!res.code) {
				this.$u.toast(res.msg);
				return;
			}
			res.data.data.forEach(item => {
				item.options = [
					{
						text: item.user && item.user.followed ? '取消关注' : '添加关注',
						style: {
							backgroundColor: this.theme.faBorderColor
						}
					},
					{
						text: '提问',
						style: {
							backgroundColor: this.theme.bgColor
						}
					}
				];
			});
			this.followerList = this.followerList.concat(res.data.data);
			this.has_more = !(res.data.last_page == res.data.current_page);
		},
		goPage(id) {
			this.$wanlshop.to(`/pages/community/user/index?user_id=${id}`)
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		if (this.has_more) {
			this.status = 'loading';
			this.page++;
			this.getUserFollower();
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f4f6f8;
}

.item {
	display: flex;
	padding: 20rpx;

	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
}

.signature {
	text-align: left;
	font-size: 20rpx;
	color: $u-content-color;
}

::v-deep .u-swipe-view view:nth-of-type(2) .u-btn-text {
	width: 140rpx;
	left: 54%;
}
</style>
